<template>
<div class="indexList">
    <ul>
        <li v-for="movie in movieList"
        :key="movie.id"
        @click="movie_detail(movie.id)"
        >
        <div class="movie_warpper">
            <img :src="[movie.img.replace('w.h','100.150')]" class="img_list">
            <div class="movie_detail">
            <div class="title_name">
              <h3 class="title textOverflow1">{{movie.nm}}</h3>
              <span
                  class="icon"
                  v-if="movie.version =='v3d imax'"
                  :class="{'active1': movie.version =='v3d imax'}"
              ></span>
              <span
                  v-else
                  class="icon"
                  :class="{'active2': movie.version =='v2d imax'}"
              ></span>
            </div>
            <p class="evaluate" v-if="movie.sc > 0 && movie.preShow">
              观众评:
              <span>{{movie.sc}}</span>
            </p>
            <p class="evaluate" v-else-if="movie.sc == 0">暂无评分</p>
            <p class="evaluate" v-else>
                <span>{{movie.wish}}</span>人想看
            </p>
            <h5 class="people textOverflow1">主演:{{movie.star}}</h5>
            <h5 class="people textOverflow1">{{movie.pubDesc}}</h5>
            <h6 class="show textOverflow1">{{movie.showInfo}}</h6>
          </div>
        </div>
        </li>
    </ul>
</div>
</template>

<script>
export default {
    props: ['movieList'],

    data() {
    return {
        list:''
    }
  },
  methods: {
  movie_detail(id) {
    //自定义事件
    this.$emit('toMovieDetail', id)
  }
  },
}
</script>


<style lang="scss">
.movie_warpper{
    display: flex;
    padding: 10px 10px;
    text-align: left;
    line-height: 35px;
}
h5{
    color:#666;
}
.movie_detail{
    padding-left: 10px;
}
</style>
